<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- ul用于
      导航栏
      各种页面 list 列表
      ..... 基本常见网站导航、列表页都会使用 ul li 无序列表标签 
    -->

    <h1>无序列表</h1>
    <ul>
      <li>小炒肉</li>
      <li>小龙虾</li>
      <li>跺脚鱼头</li>
      <li>酸辣白菜</li>
    </ul>

    <h1>无序列表-嵌套</h1>
    <ul>
      <li>
        <h2>北京市</h2>
        <ul>
          <li>海淀区</li>
          <li>东城区</li>
          <li>朝阳区</li>
          <li>石景山区</li>
        </ul>
      </li>
      <li>
        <h2>上海市</h2>
        <ul>
          <li>黄浦区</li>
          <li>浦东新区</li>
          <li>徐汇区</li>
          <li>静安区</li>
        </ul>
      </li>
    </ul>
    <br /><br /><br /><br />
    <h1>无序列表标签</h1>
    <p>ul的type属性在HTML5中已经废弃，使用CSS替代</p>

    <h2>style="list-style-type:disc" 实心圆</h2>
    <ul style="list-style-type: disc">
      <li>小炒肉</li>
      <li>小龙虾</li>
      <li>剁椒鱼头</li>
      <li>酸辣白菜</li>
      <li>7分熟牛排</li>
    </ul>

    <h2>style="list-style-type:square" 实心正方形</h2>
    <ul style="list-style-type: square">
      <li>小炒肉</li>
      <li>小龙虾</li>
      <li>剁椒鱼头</li>
      <li>酸辣白菜</li>
      <li>7分熟牛排</li>
    </ul>

    <h2>style="list-style-type:circle" 空心圆</h2>
    <ul style="list-style-type: circle">
      <li>小炒肉</li>
      <li>小龙虾</li>
      <li>剁椒鱼头</li>
      <li>酸辣白菜</li>
      <li>7分熟牛排</li>
    </ul>
  </body>
</html>
